<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>代码自动生成</title>
    <style>
        html, body {
            margin: 0;
            padding: 15px 35px;
            background-color: #090821;
            color: #ffffff;
        }
        .content {
            display: flex;
        }
        .left, .right {
            flex: 1;
        }
        .left > div {
            margin: 8px 0;
        }

        input[type='text']{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px 8px;
            width: 200px;
            font: 14px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif;
        }
        input[type='text']:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

        @keyframes hover-color {
            from { border-color: #c0c0c0; }
            to { border-color: #3e97eb; }
        }

        .magic-radio,
        .magic-checkbox {
            position: absolute;
            display: none;
        }

        .magic-radio[disabled],
        .magic-checkbox[disabled] {
            cursor: not-allowed;
        }

        .magic-radio + label,
        .magic-checkbox + label {
            position: relative;
            display: block;
            padding-left: 30px;
            cursor: pointer;
            vertical-align: middle;
        }
        .magic-radio + label:hover:before,
        .magic-checkbox + label:hover:before {
            animation-duration: 0.4s;
            animation-fill-mode: both;
            animation-name: hover-color;
        }
        .magic-radio + label:before,
        .magic-checkbox + label:before {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 18px;
            height: 18px;
            content: '';
            border: 1px solid #c0c0c0;
        }
        .magic-radio + label:after,
        .magic-checkbox + label:after {
            position: absolute;
            display: none;
            content: '';
        }

        .magic-radio[disabled] + label,
        .magic-checkbox[disabled] + label {
            cursor: not-allowed;
            color: #e4e4e4;
        }
        .magic-radio[disabled] + label:hover,
        .magic-radio[disabled] + label:before,
        .magic-radio[disabled] + label:after,
        .magic-checkbox[disabled] + label:hover,
        .magic-checkbox[disabled] + label:before,
        .magic-checkbox[disabled] + label:after {
            cursor: not-allowed;
        }
        .magic-radio[disabled] + label:hover:before,
        .magic-checkbox[disabled] + label:hover:before {
            border: 1px solid #e4e4e4;
            animation-name: none;
        }
        .magic-radio[disabled] + label:before,
        .magic-checkbox[disabled] + label:before {
            border-color: #e4e4e4;
        }

        .magic-radio:checked + label:before,
        .magic-checkbox:checked + label:before {
            animation-name: none;
        }

        .magic-radio:checked + label:after,
        .magic-checkbox:checked + label:after {
            display: block;
        }

        .magic-radio + label:before {
            border-radius: 50%;
        }

        .magic-radio + label:after {
            top: 7px;
            left: 7px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #3e97eb;
        }

        .magic-radio:checked + label:before {
            border: 1px solid #3e97eb;
        }

        .magic-radio:checked[disabled] + label:before {
            border: 1px solid #c9e2f9;
        }

        .magic-radio:checked[disabled] + label:after {
            background: #c9e2f9;
        }

        .magic-checkbox + label:before {
            border-radius: 3px;
        }

        .magic-checkbox + label:after {
            top: 2px;
            left: 7px;
            box-sizing: border-box;
            width: 6px;
            height: 12px;
            transform: rotate(45deg);
            border-width: 2px;
            border-style: solid;
            border-color: #fff;
            border-top: 0;
            border-left: 0;
        }

        .magic-checkbox:checked + label:before {
            border: #3e97eb;
            background: #3e97eb;
        }

        .magic-checkbox:checked[disabled] + label:before {
            border: #c9e2f9;
            background: #c9e2f9;
        }

        :root{
            --primary-color: royalblue;
        }
        .button{
            padding: 10px 16px;
            width: 300px;
            color: #000000d9;
            border: 1px solid #d9d9d9;
            background-color: transparent;
            border-radius: 2px;
            line-height: 1.4;
            font-size: 16px;
            box-shadow: 0 2px #00000004;
            cursor: pointer;
            transition: .3s;
            transform: scale(1);
        }
        .button:focus-visible{
            outline: 0;
        }
        .button::after{
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: 0 0 0 6px var(--primary-color);
            opacity: 0;
            transition: .3s;
        }
        .button[type="primary"]{
            border-color: transparent;
            background-color: var(--primary-color);
            color: #fff;
            text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
            box-shadow: 0 2px #0000000b;
        }
        .button[type="dashed"]{
            border-style: dashed;
        }
        .button[type="text"]{
            border-color: transparent;
            box-shadow: none;
        }
        .button:not([type]):hover,
        .button[type="dashed"]:hover,
        .button[type="dashed"]:focus{
            color: var(--primary-color);
            border-color: currentColor;
        }
        .button[type="primary"]:hover{
            filter: brightness(1.1);
        }
        .button[type="text"]:hover,
        .button[type="text"]:focus{
            background: rgba(0,0,0,.018);
        }
        .button.button:active{
            filter: brightness(.9);
        }
        .button.button:active:not([type="text"])::after{
            transition: 0s;
            box-shadow: none;
            opacity: 0.4;
        }
        .icon{
            width: 1em;
            margin-right: .5em;
            vertical-align: middle;
            fill: currentColor;
            transform: rotate(360deg);
            transition: .5s;
        }
        .button:active .icon{
            transform: rotate(0);
            transition: 0s;
        }
    </style>
</head>
<body>
<div>
    <div class="title">
    </div>
    <div class="content">
        <div class="left">
            <div>
                <label for="tableName">表名：</label>
                <input type="text" id="tableName" name="tableName" required />
            </div>
            <div>
                <label for="tablePre">前缀：</label>
                <input type="text" id="tablePre" name="tablePre" required />
            </div>
            <div>
                <label for="moduleName">包名：</label>
                <input type="text" id="moduleName" name="moduleName" required />
            </div>
            <div style="margin-top: 25px;">
                <input class="magic-checkbox" type="checkbox" id="genController" name="genController" checked/>
                <label for="genController">Controller</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genService" name="genService" checked>
                <label for="genService">Service</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genMapper" name="genMapper" checked>
                <label for="genMapper">Mapper</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genEntity" name="genEntity" checked>
                <label for="genEntity">Entity</label>
            </div>
            <div style="margin-left: 25px;">
                <input class="magic-checkbox" type="checkbox" id="includeUpdatedField" name="includeUpdatedField" checked>
                <label for="includeUpdatedField">是否包含UpdatedField</label>
            </div>
            <div style="margin-left: 25px;">
                <input class="magic-checkbox" type="checkbox" id="includeCreatedField" name="includeCreatedField" disabled checked>
                <label for="includeCreatedField">是否包含CreatedField</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genXml" name="genXml">
                <label for="genXml">Xml</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genVue" name="genVue" checked>
                <label for="genVue">Vue</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genApi" name="genApi" checked>
                <label for="genApi">Ts-Api</label>
            </div>
            <div>
                <input class="magic-checkbox" type="checkbox" id="genMenuSql" name="genMenuSql" checked>
                <label for="genMenuSql">Sql</label>
            </div>
            <div style="margin-top: 25px;">
                <label for="author" style="width: 90px;display: inline-block;">作者</label>
                <input type="text" id="author" name="author" required >
            </div>
            <div>
                <label for="javaPath" style="width: 90px;display: inline-block;">Java路径：</label>
                <input type="text" id="javaPath" name="javaPath" style="width: 400px" th:value="${javaPath}" required >
            </div>
            <div>
                <label for="jsPath" style="width: 90px;display: inline-block;">Js路径：</label>
                <input type="text" id="jsPath" name="jsPath" style="width: 400px" th:value="${jsPath}" required >
            </div>
            <div style="margin-top: 25px;">
                <button class="button" type="primary" id="submit">生成代码</button>
            </div>
        </div>
        <div class="right" id="right">
        </div>
    </div>
</div>
<script>
  const tableNameInput = document.querySelector('#tableName');
  tableNameInput.addEventListener('change', function(e) {
    const name = e.target.value;
    if (name) {
      const pre = name.split("_")[0];
      document.querySelector('#tablePre').value = pre;
      document.querySelector('#moduleName').value = pre;
    }
  });

  const entity = document.querySelector('#genEntity');
  entity.addEventListener('change', function(e) {
    const checked = e.target.checked;
    document.querySelector('#includeUpdatedField').disabled = !checked;
    document.querySelector('#includeCreatedField').disabled = !checked;
  });

  const updatedField = document.querySelector('#includeUpdatedField');
  updatedField.addEventListener('change', function(e) {
    const checked = e.target.checked;
    if (checked) {
      document.querySelector('#includeCreatedField').checked = checked;
    }
    document.querySelector('#includeCreatedField').disabled = checked;
  });

  const button = document.querySelector('#submit');
  button.addEventListener('click', (event) => {
    const inputList = document.querySelectorAll("input[name]");
    const data = {}
    inputList.forEach(function(input) {
      if (input.type === 'checkbox') {
        data[input.name] = input.checked
      } else {
        data[input.name] = input.value
      }
    })
    if (!data.tableName) {
      alert("表名必填！");
      return;
    }
    if (!data.tablePre) {
      alert("前缀必填！");
      return;
    }
    if (!data.moduleName) {
      alert("包名必填！");
      return;
    }
    if (!data.javaPath) {
      alert("JavaPath必填！");
      return;
    }
    if (!data.jsPath) {
      alert("JsPath必填！");
      return;
    }
    if (confirm("确定生成代码吗？") === true) {
      button.disabled='disabled';
      fetch('/code', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
      })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            let result = "<div style='font-weight: bold; margin-bottom: 15px;'>代码已生成：</div>";
            for (const key in data.data) {
              result += "<div style='font-weight: bold; margin-left: 15px; margin-top: 10px;'>" + key + ":</div>";
              result += "<div style='margin-left: 30px;'>" + data.data[key] + "</div>";
            }
            result = "<div>" + result + "</div>";
            document.querySelector('#right').innerHTML = result;
          } else {
            let result = "<div style='color: red;'>"+data.message+"</div>";
            document.querySelector('#right').innerHTML = result;
          }
          button.disabled='';
        });
    }
  });
</script>
</body>
</html>